<template>
  <div class="rainfall-map">
    <el-tabs v-model="activeName" class="demo-tabs" @tab-change="handleClick">
      <el-tab-pane :label="item.time" :name="item.time" v-for="item in imgArr" :key="item.time">
        <div class="img-box">
          <el-image :src="item.path" :preview-src-list="[item.path]" />
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script setup>
import { ref, defineProps, watch, defineExpose } from 'vue'
import {
  //查询降雨信息图片
  getAirainImage
} from '@/services/modules/intelligent-rainfall/intelligent-rainfall.js'
const imgArr = ref([])
const activeName = ref('')
const props = defineProps({
  scId: {
    type: String,
    default: ''
  }
})
// 查询降雨信息
const handleGetAirainImg = () => {
  getAirainImage({ scId: props.scId }).then((res) => {
    imgArr.value = res.data
    if (res.data?.length) activeName.value = res.data[0].time
  })
}
watch(
  () => {
    props.scId
  },
  async () => {
    //  监听方案id
    await handleGetAirainImg()
  },
  {
    deep: true,
    immediate: true
  }
)

// 清楚计算结果
const handleClearResult = () => {
  imgArr.value = []
  activeName.value = ''
}
defineExpose({ handleGetAirainImg, handleClearResult })
</script>

<style lang="less" scoped>
.rainfall-map {
  width: 100%;
  height: 100%;
  :deep(.el-tabs) {
    height: 100%;
  }
  :deep(.el-tabs__content) {
    height: calc(100% - 50px);
    .img-box {
      height: 100%;
      width: 100%;
      .el-image {
        height: 100%;
        width: 100%;
      }
    }

    .el-tab-pane {
      height: 100%;
    }
  }
}
</style>
